<template>
    <view class="gjl-view">
        <view class="top-bg">

        </view>
        <view class="main">
            <view class="user-box">
                <view class="left">
                    <view class="user-img">
                        <image :src="userInfo.avatarUrl" mode=""></image>
                    </view>
                    <view class="text-box">
                        <view class="big">
                            我的书屋
                        </view>
                        <view class="bottom">
                            <view class="text">
                                藏书{{dakaData.zCangShuNum || 0}}本
                            </view>
                            <mIcon type="arrRight" size="12" color="#fff"></mIcon>
                        </view>
                    </view>
                </view>
                <view class="right">
                    <view class="text">
                        已读{{dakaData.zYueDu || 0}}本,超越了{{dakaData.zChaoyue || 0}}%的同龄人
                    </view>
                </view>
            </view>
            <view class="data-box">
                <view class="blue-title6">
                    宝贝阅读数据
                </view>
                <view class="num-box">
                    <view class="num-li">
                        <view class="num">
                            {{dakaData.bYueDu || 0}}
                        </view>
                        <view class="text">
                            本月阅读
                        </view>
                    </view>
                    <view class="num-li">
                        <view class="num">
                            {{dakaData.bCiShu || 0}}
                        </view>
                        <view class="text">
                            阅读次数
                        </view>
                    </view>
                    <view class="num-li">
                        <view class="num">
                            {{dakaData.bChaoyue || 0}}%
                        </view>
                        <view class="text">
                            本月超同龄人
                        </view>
                    </view>
                </view>
                <view class="btn-box">
                    <view class="left" @click="$routerTo({path: '/pagesMine/bookstore/readingPlanOut'})">
                        我的阅读计划
                    </view>
                    <view class="right" @click="$routerTo({path: '/pagesMine/bookstore/baogao'})">
                        我的阅读报告
                    </view>
                </view>
            </view>
            <view class="daka-box">
                <view class="inner">
                    <darkCalendar @changeMouth="changeMouth" :signeddates="dakaArr"></darkCalendar>
                </view>
                <view class="btn-box">
                    <view class="btn" @click="$routerTo({path: '/pagesMine/bookstore/index',query:{id:1},type:'RT'})">
                        去打卡
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        mapGetters
    } from 'vuex'
    import service from "@/service";
    import darkCalendar from '@/components/dark-calendar/dark-calendar2.vue'
    export default {
        components:{
            darkCalendar
        },
        data(){
            return {
                dakaData: {},
                dakaArr: []
            }
        },
        computed: {
            ...mapGetters([
                'userInfo'
            ])
        },
        onShow() {
            this.getData()
        },
        methods:{
            // 切换月份
            changeMouth(dates){
                var y , m
                for (let i = 0; i < dates.length; i++) {
                    if (dates[i].lm) {
                        y = dates[i].year
                        m = dates[i].month + 1
                        break
                    }
                }
                var firstDay = new Date(y, m - 1, 1).getTime()/1000;
                var lastDay = new Date(y, m, 1).getTime()/1000;
                this.getDaka(firstDay)
            },
            // 获取打卡数据
            getDaka(temp){
                service.mineService.BookstorePunchCalendar({
                    data: {
                        Timestamp: temp
                    },
                    success: res => {
                        if(res.result){
                            this.dakaArr = res.result
                        }
                    },
                    fail: () => {
                
                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            // 获取首页数据
            getData(){
                service.mineService.BookstorePunch({
                    data: {
                        
                    },
                    success: res => {
                        this.dakaData = res.result
                    },
                    fail: () => {
                
                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view {
        min-height: 100%;
        overflow: hidden;

        .top-bg {
            height: 253rpx;
            background: rgba(43, 168, 252, 1);
        }

        .main {
            margin: 0 30rpx;
            .daka-box{
                margin-bottom: 75rpx;
                margin-top: 48rpx;
                padding: 0 20rpx 48rpx;
                background:rgba(255,255,255,1);
                box-shadow:0px 2px 10px rgba(0,0,0,0.08);
                border-radius:10px;
                .btn-box{
                    margin-top: 40rpx;
                    .btn{
                        background:rgba(43,168,252,1);
                        border-radius:8rpx;
                        margin: 0 22rpx;
                        padding: 24rpx 0;
                        text-align: center;
                        font-size:28rpx;
                        font-weight:400;
                        color:rgba(255,255,255,1);
                    }
                }
            }
            .data-box {
                margin-top: 45rpx;
                padding: 44rpx 40rpx 39rpx;
                background: rgba(255, 255, 255, 1);
                box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
                border-radius: 20rpx;

                .blue-title6 {
                    padding-left: 31rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                    color: rgba(51, 51, 51, 1);
                }

                .num-box {
                    text-align: center;
                    margin-top: 47rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;

                    .num-li {
                        .num {
                            font-size: 38rpx;
                            font-weight: bold;
                            color: rgba(51, 51, 51, 1);
                        }

                        .text {
                            margin-top: 10rpx;
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(153, 153, 153, 1);
                        }
                    }
                }

                .btn-box {
                    margin-top: 68rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .left {
                        box-sizing: border-box;
                        padding: 19rpx 56rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(43, 168, 252, 1);
                        border-radius: 4rpx;
                        border: 1px solid rgba(43, 168, 252, 1);
                    }

                    .right {
                        padding: 19rpx 56rpx;
                        background: rgba(43, 168, 252, 0.1);
                        border-radius: 4rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(43, 168, 252, 1);
                    }
                }
            }

            .user-box {
                margin-top: -213rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .left {
                    display: flex;
                    align-items: center;

                    .user-img {
                        display: flex;

                        image {
                            width: 100rpx;
                            height: 100rpx;
                            border: 1px solid rgba(112, 112, 112, 1);
                            border-radius: 50%;
                        }
                    }

                    .text-box {
                        margin-left: 20rpx;

                        .big {
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(255, 255, 255, 1);
                        }

                        .bottom {
                            margin-top: 10rpx;
                            font-size: 24rpx;
                            font-weight: 400;
                            color: rgba(255, 255, 255, 1);
                            display: flex;
                            align-items: center;

                            .text {
                                margin-right: 13rpx;
                            }
                        }
                    }
                }

                .right {
                    padding: 10rpx 14rpx;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 4rpx;

                    .text {
                        font-size: 24rpx;
                        font-weight: 400;
                        color: rgba(43, 168, 252, 1);
                    }
                }
            }
        }
    }
</style>
